<template>
	<u-popup v-model="loginShow" mode="center" @close = "close">
		<view class="loginTips">
			<image :src="$util.img('/static/img/login/login-tips.png')" mode="widthFix"></image>
			<view class="box">
				<view class="tips-1">您还没有登录</view>
				<view class="tips-2">登录即刻开启品质生活</view>
				<u-button class="btn-primary" ripple-bg-color="rgba(0,0,0,.4)"
				@click="gotolink" :ripple="true">立即登录</u-button>
				<view class="close" @click="loginShow = false">取消</view>
			</view>
		</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			show: {
				type: [String, Boolean],
				default: false
			}
		},
		data() {
			return {
				loginShow:false
			}
		},
		watch:{
			show:{
				handler(newval,oldVal){
					this.loginShow = this.show;
				},
				immediate: true
			}
		},
		methods:{
			gotolink(){
				this.$emit('callback')
				this.$util.redirectTo('/pages/login/login')
			},
			close(){
				this.loginShow = false;
				this.$emit('close')
			},
		}
	}
</script>

<style lang="scss" scoped>
	.loginTips {
		width: calc(100vw - 120rpx);
		min-height: 680rpx;
		border-radius:20rpx;
		overflow: hidden;
		position: relative;
		image{
			width: 100%;
			height: 100%;
		}
		.box{
			position: absolute;
			bottom:0;
			left: 0;
			width: 100%;
			height: calc(100% - 320rpx);
			.tips-1{
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				text-align: center;
			}
			.tips-2{
				text-align: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #000000;
				margin: 28rpx 0 74rpx 0 ;
			}
		}
		.btn-primary {
			height: 96rpx;
			background: #292929;
			border-radius: 96rpx;
			text-align: center;
			line-height: 96rpx;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #FFFFFF;
			margin: 0 55rpx;
			margin-bottom: 23rpx;
		}
		.close{
			font-size: 26rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #000000;
			text-align: center;
		}
	}
</style>